<template>
  <div class="subHeader">
    <el-breadcrumb separator-class="el-icon-arrow-right"
                   style="line-height: 50px;float: left;">
      <el-breadcrumb-item v-for="item in breadData"
                          :key="item.name"
                          :to="item.path">{{item.meta.role}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="btn"
         v-if="btnShow">
      <slot name="btn"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'subHeader',
  data () {
    return {
      // breadData: []
      // btnName: '',
    }
  },
  computed: {
    btnData () {
      return this.$store.state.headerBtn.btnData
    },
    btnShow () {
      return this.$route.matched[this.$route.matched.length - 1].path.indexOf('index') > 0
    },
    breadData () {
      let [...routeInfo] = this.$route.matched
      routeInfo.splice(0, 2)
      let routes = routeInfo.filter(item => {
        return item.path.indexOf('index') < 0
      })
      if (this.$route.query.routeName) {
        routes.pop()
        routes.push({ path: '', meta: { role: this.$route.query.routeName } })
      }
      return routes
    }
  }
}
</script>
<style lang="less" scoped>
.subHeader {
  height: 50px;
  width: 100%;
  background: #fff;
  padding: 0 20px;
  border-bottom: 1px solid #e7e8ec;
  .btn {
    float: right;
    margin-top: 10px;
  }
}
</style>
